<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
	<link href="../../css/Kongshop.css" rel="stylesheet"/>
	<link href="../../css/xq.css" />
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
	<!-- 引入组件 -->
	<script src="html5plus://ready"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/vant.min.js"></script>
	<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/listener_other.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
			.express {
				color: #999;
				padding: 20px 0px 5px 0px;
			}
			
			.vol-class {
				color: red;
			}
		</style>
	</head>

	<body>
		<div id="app" style="overflow-x: hidden;overflow-y: auto;">
			<van-row>
				<van-col span="24">
					<van-cell-group>
						<van-cell icon="arrow-left" @click="returnPage">
							<van-swipe :autoplay="3000">
								<van-swipe-item v-for="img in detail.SwipeImages">
									<img :src="img.src" width="100%" onerror="this.src='../img/detail_default.jpg'" />
								</van-swipe-item>
							</van-swipe>
						</van-cell>
						<van-cell>
							<div style="font-size: 18px; font-weight: bolder;" v-text="detail.Name"></div>
							<div style="font-size: 24px; color: red; padding-top: 20px;">￥<span v-text="detail.MarketPrice"></span></div>
							<van-col span="10" class="express">快递：免运费</van-col>
							<van-col span="14" class="express">销量290</van-col>
						</van-cell>
						<van-cell style="background-color: #F3F3F6;">
							<van-col class="vol-class" span="8">☞正品保证</van-col>
							<van-col class="vol-class" span="8">☞极速退款</van-col>
							<van-col class="vol-class" span="8">☞两天内发货</van-col>
						</van-cell>
					</van-cell-group>
					<div style="height: 15px;background-color: #E8E8E8;"></div>
					<van-panel title="商品详情">
						<van-list>
							<van-cell-swipe v-for="pd in proDe">
								<van-cell>
									<img :src="pd" onerror="this.src='../img/xiangjiao.jpg'"  style="width: 100%;" />
								</van-cell>
							</van-cell-swipe>
						</van-list>
					</van-panel>

				</van-col>
				<van-col span="24">
					<van-goods-action>
						<van-goods-action-mini-btn v-show="isCollected" style="width: 25%;" icon="like" text="已收藏" @click="cancelCollect"></van-goods-action-mini-btn>
						<van-goods-action-mini-btn v-show="!isCollected" style="width: 25%;" icon="like-o" text="收藏" @click="joinCollection"></van-goods-action-mini-btn>
						<van-goods-action-big-btn @click="joinCar" v-if="addShopcartCount==0">加入购物车</van-goods-action-big-btn>
						<van-goods-action-big-btn @click="joinCar" v-else>加入购物车X<span v-text="addShopcartCount"></span></van-goods-action-big-btn>
						<van-goods-action-big-btn text="立即购买" @click="goShopping" primary></van-goods-action-big-btn>
					</van-goods-action>
				</van-col>
			</van-row>
		</div>
		<script type="text/javascript">
			var key = plus.storage.getItem("key");
			var vm = new Vue({
				el: "#app",
				data: {
					detail: "",
					isCollected: false,
					phone: "",
					addShopcartCount: 0,
					pid: 0,
					proDe: ["../img/xiangjiao.jpg", "../img/xiangjiao.jpg", "../img/temp/dt_3.png", "../img/temp/dt_4.png", "../img/temp/dt_5.png"]
				},
				methods: {
					joinCar() { //添加购物车
						if(key == null) {
							plus.webview.create("../setting/main.html", "login").show();
						} else {
							vm.$toast.success("加入购物车");
							vm.phone = JSON.parse(plus.storage.getItem("userData")).Phone;
							var goodsArr = [{
								goodsId: vm.detail.Id,
								buyCount: 1
							}];
							var goodsObj = {
								goodsId: vm.detail.Id,
								buyCount: 1
							};
							var newArr;
							if(localStorage.getItem(vm.phone) == null) { //如果购物车里面没有任何东西
								localStorage.removeItem(vm.phone);
								localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
								vm.addShopcartCount = 1; //显示此商品在购物车内的数量
							} else { //购物车里有东西
								newArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车里面的商品
								for(var i = 0; i < newArr.length; i++) { //遍历购物车
									if(newArr[i].goodsId == vm.detail.Id) { //如果购物车里面有此商品
										newArr[i].buyCount += 1; //商品数量+1
										localStorage.removeItem(vm.phone);
										localStorage.setItem(vm.phone, JSON.stringify(newArr)); //
										vm.addShopcartCount = newArr[i].buyCount; //显示此商品在购物车内的数量
										return;
									}
								}
								//购物车里没有此商品
								newArr.push(goodsObj); //向购物车内添加商品
								localStorage.removeItem(vm.phone);
								localStorage.setItem(vm.phone, JSON.stringify(newArr)); //
								vm.addShopcartCount = 1; //显示此商品在购物车内的数量
							}
						}
					},
					goShopping() { //立即购买
						if(key == null) {
							plus.webview.create("../main/login.html", "login").show();
						} else {
							plus.webview.create("../shopping/jiesuan.html", "jiesuan", {}, {
								pid: this.pid,
								isShow: true,
								address: true
							}).show();
						}
					},
					joinCollection() { //加入收藏
						if(key == null) {
							plus.webview.create("main/login.html", "login").show();
						} else {
							ajax({
								url: "http://dsapi.ysd3g.com/API/CollectGoods",
								dataType: "jsonp",
								data: {
									key: key,
									goodsId: vm.detail.Id
								},
								success(res) {
									if(!res.Error) {
										vm.$toast.success(`收藏成功`);
										vm.isCollected = true;
									} else {
										vm.$toast.success(res.Msg);
									}
								}
							});
						}
					},
					cancelCollect() {
						//取消收藏
						var key = plus.storage.getItem("key");
						ajax({
							url: "http://dsapi.ysd3g.com/api/cancelCollectGoods",
							dataType: "jsonp",
							data: {
								key: key,
								goodsId: vm.detail.Id
							},
							success(res) {
								if(!res.Error) {
									vm.$toast.success("已取消收藏");
									vm.isCollected = false;
								} else {
									vm.$toast.fail(res.Msg);
								}
							}
						});
					},
					returnPage() {
						plus.webview.hide(plus.webview.currentWebview());
					}
				},
				mounted() {
					var gid = plus.webview.currentWebview().Id
					ajax({
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "jsonp",
						data: {
							gId: gid
						},
						success(res) {
							vm.detail = res.Detail;
							vm.pid = res.Detail.Id;
						}
					});
// 					if(plus.storage.getItem("key") != null) {//如果key值不为空查看是否已收藏
// 						ajax({
// 							url: "http://dsapi.ysd3g.com/API/MyGoodsCollectList",
// 							dataType: "jsonp",
// 							data: {
// 								p: 1,
// 								key: plus.storage.getItem("key")
// 							},
// 							success(res) {
// 								for(var i = 0; i < res.Data.length; i++) {
// 									if(res.Data[i].GoodsId == gid) {
// 										vm.isCollected = true;
// 									}
// 								}
// 							}
// 						})
// 					}
// 					var spg = localStorage.getItem(JSON.parse(plus.storage.getItem("userData")).Phone); //购物车内的商品
// 					if(spg != null) {
// 						var shopcartGoods = JSON.parse(localStorage.getItem(JSON.parse(plus.storage.getItem("userData")).Phone)); //购物车里面的商品
// 						for(var i = 0; i < shopcartGoods.length; i++) { //遍历购物车
// 							if(shopcartGoods[i].goodsId == gid) { //如果购物车里面有此商品
// 								this.addShopcartCount = shopcartGoods[i].buyCount;
// 							}
// 						}
// 					}
				}
			});
		</script>

	</body>

</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
	<link href="../../css/Kongshop.css" rel="stylesheet"/>
	<link href="../../css/xq.css" />
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
	<!-- 引入组件 -->
	<script src="../../js/vue.min.js"></script>
	<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
	<script src="../../js/vant.min.js"></script>
	<script src="html5plus://ready"></script>
	<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
	<!-- <style>
		header{
			text-align: center;
			height: 46px;
			line-height: 46px;
			
		}
		body {
			background-color: #E5E5E5;
		}
		#app {
			margin-top: 46px;
		
		}
	</style>
</head>
<body>
	<div id="app">
		<header>
			<van-row style="background-color: red; text-align: center; width: 100%; height: 60px; color: #E8E8E8;">							
				<van-col span="6" offset="9">购物车</van-col>
			</van-row>
			
		</header>
		<section>
			<van-row v-for="item in carts2">
				<van-card
				  :num="num"
				  <!-- :tag="item.Detail.Status" 
				  :title="item.Name"
				  :thumb="item.Details"
				  :price="item.RealPrice"
				  :origin-price="item.MarketPrice"
				  >
				 <div slot="footer">
				  <van-row>
					  <van-col span="9">&nbsp;</van-col>
					  <van-col span="12">
						  <van-stepper
							  v-model="item.num"
							  integer
							  :min="1"
							  :max="40"
							  @plus="item.num++"
							  @minus="item.num--"
							  :step="1"></van-stepper>
					  </van-col>
					  <van-col span="2" offset="1">
						  <van-icon name="delete" style="margin-top: 10px;"></van-icon>
					  </van-col>
					</van-row>
				 </div>
				</van-card>
			</van-row>
			  </van-card>
			</van-row>
			
			<van-row id="gwc">
				
			</van-row>
			
			
			
 			<van-row>		 
				<van-card
					  num="1"
					  tag="热卖"
					  price="149.90"
					  title="开心果 人人的最爱"
					  :thumb="imageURL"
					  origin-price="199.9">
			  <div slot="footer">
				  <van-row>
					  <van-col span="9">&nbsp;</van-col>
					  <van-col span="12">
						  <van-stepper
							  v-model="value1"
							  integer
							  :min="1"
							  :max="40"
							  :step="1"></van-stepper>
					  </van-col>
					  <van-col span="2" offset="1">
						  <van-icon name="delete" style="margin-top: 10px;"></van-icon>
					  </van-col>
                  </van-row>
			  </div>
			 </van-card>
			</van-row>
			  <van-row>
				 <van-card
					  num="1"
					  tag="热卖"
					  price="88.80"
					  title="大香蕉 香蕉挺大个"
					  :thumb="imageURL1"
					  origin-price="129.9">
				<div slot="footer">
					<van-row>
						<van-col span="9">&nbsp;</van-col>
						<van-col span="12">
							<van-stepper
							v-model="value"
							integer
							:min="1"
							:max="40"
							:step="1"></van-stepper>
						</van-col>
						<van-col span="2" offset="1">
							<van-icon name="delete" style="margin-top: 10px;"></van-icon>
						</van-col>
					</van-row>			  
				</div>
			 </van-card>
			</van-row> 
		</section>
		
		<footer>
			<van-submit-bar
			  button-text="提交订单"
			  :price="price*100"
			  @submit="tjdd">
			  <span slot="tip">
				你的收货地址不支持同城送, <span>修改地址</span>
			  </span>
			  <span slot="top" style="display:none">
			  		{{totalprice}}
			  </span>
            </van-submit-bar>
		</footer>
	</div> -->
	<style>
			.com-header {
				height: 80px;
			}
			
			.com-title {
				z-index: 9999;
				position: fixed;
				width: 100%;
				height: 80px;
				background: #FF4443;
				color: #FAFAFA;
			}
			
			.com-title1 {
				z-index: 9999;
				position: fixed;
				margin-top: 147%;
				width: 100%;
				height: 50px;
				background: #FBFBFB;
				color: #FAFAFA;
			}
			
			.com-main {
				width: 100%;
				margin-bottom: 28%;
			}
			
			.list {
				margin-top: 2px;
			}
			
			.item1 {
				height: 90px;
				margin-top: 8px;
				background: white;
				margin-left: 4%;
				margin-top: -12%;
			}
			
			.item1 img {
				height: 96%;
				width: 86px;
				float: left;
				margin-top: 3px;
				margin-left: 8px;
			}
			
			.listName {
				margin-left: 5px;
				color: #000000;
			}
			
			.pLeft {
				width: 25%;
				height: 100%;
				float: left;
				margin-left: 3%;
			}
			
			.pcenter {
				width: 55%;
				height: 100%;
				float: left;
			}
			
			.pRight {
				width: 20%;
				float: right;
			}
			
			.com-title {
				z-index: 9999;
				position: fixed;
				width: 100%;
				height: 80px;
				background: #FF0000;
				color: #FAFAFA;
			}
			[v-cloak] { display:none}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<van-row>
				<!--导航栏 -->
				<van-col span="24" class="com-header">
					<div class="com-title">
						<!--获取商品数量{{}}-->
						<div style="text-align: center;padding-top: 40px;">购物车</div>
						<div style="float: right;margin-top: -20px;font-size: 13px;margin-right: 10px;" @click="clearShopCart()">清空购物车</div>
					</div>
				</van-col>
				<!--栏目 -->
				<van-col span="24" class="com-main">
					<!--购物车无商品 -->
					<div v-show="isShow">
						<div style="text-align: center;color: #C9C9C9;font-size: 30px;margin-top: 200px;">
							<van-icon name="cart" />
						</div>
						<div style="color:#C9C9C9 ;text-align: center;">购物车空空如也</div>
					</div>
					<!--购物车有商品 -->
					<div v-show="isShow==false">
						<div class="list" v-for="(pl,index) in d">
							<van-checkbox v-model="pl.checked" style="margin-top: 10%; margin-left: 2%;" class="checkbox" @change="select(pl.Id,pl.RealPrice,pl.buyCount,pl.checked)" :value="pl.Id"></van-checkbox>
							<div class="item1">
								<!--图片区域-->
								<div class="pLeft" @click="skipPd(pl.Id)">
									<img :src="pl.CoverImage" onerror="this.src='../img/product_default.jpg'" />
								</div>
								<!--文字 计数器-->
								<div class="pcenter">
									<div style="float: left;height: 50%;width:100%;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
										<span class="listName" style="margin-left:25px;" v-text="pl.Name"></span>
									</div>
									<div style="float: left;height: 50%;width:100%;">
										<div style="margin:13px 0px 0px 60px;">
											<van-stepper v-model="pl.buyCount" @plus="add(pl.Id, pl.buyCount+1)" @minus="minus(pl.Id, pl.buyCount-1)" />
										</div>
									</div>
								</div>
								<!--价格 删除图标-->
								<div class="pRight">
									<div style="height: 50%;margin-top: -90px;">
										<small style="color: red;font-size: 15px;margin-left: 20px;">￥</small>
										<span style="color: red;font-size: 13px;"><span v-text="pl.RealPrice"></span></span>
									</div>
									<div style="float: left;height: 50%;width:100%;">
										<div style="margin-top: -52px;">
											<span style="float:right;">x&nbsp<span v-text="pl.buyCount"></span></span>
											<!--删除图标-->
											<van-button type="default" style="width: 100%;height: 30px;" @click="btn_delete(pl.Id)">
												<van-icon name="delete" />
											</van-button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--总价结算-->
						<div class="settleAccounts">
							<van-submit-bar :price="totalMoney*100" button-text="提交订单" @submit="onSubmit" />
							<van-checkbox v-model="checked" @change="selectAll">全选</van-checkbox>
						</div>
					</div>
			</van-row>
		</div>
	<script type="text/javascript">
			Vue.use(VueLazyload);
			var vm = new Vue({
				el: '#app',
				data: {
					active: 0,
					d: [],
					p: 1,
					jsonData: {},
					isShow: true,
					phone: JSON.parse(localStorage.getItem("userData")),
					buyCount: 1,
					checked: "",
					checkedData: []
				},
				methods: {
					onSubmit() { //提交订单
						plus.webview.create("../setting/jiesuan.html", "pay", {}, {
							pids: vm.checkedData,
							isShow: false,
							address: true
						}).show("slide-in-left");
					},
					clearShopCart() {
						this.$dialog.confirm({
							title: '确认框',
							message: '确定要清除购物车吗？'
						}).then(() => {
							localStorage.removeItem(this.phone);
							this.$toast.success("清除成功");
							this.d = [];
						}).catch(() => {
							this.$toast.fail("点击取消");
						});
					},
					add(id, num) { //购物车数量增加
						var goodsArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车内的商品
						for(var i = 0; i < goodsArr.length; i++) { //遍历商品
							if(goodsArr[i].goodsId == id) {
								goodsArr[i].buyCount += 1; //商品数量+1
								localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
							}
						}
					},
					minus(id, num) { //购物车数量减少
						var goodsArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车内的商品
						for(var i = 0; i < goodsArr.length; i++) { //遍历商品
							if(goodsArr[i].goodsId == id) {
								goodsArr[i].buyCount -= 1; //商品数量-1
								localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
							}
						}
					},
					btn_delete(id) { //删除购物车商品
						this.$dialog.confirm({
							title: '删除',
							message: '是否确定删除'
						}).then(() => {
							var goodsArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车内的商品
							for(var i = 0; i < goodsArr.length; i++) { //遍历商品
								if(goodsArr[i].goodsId == id) {
									goodsArr.splice(i, 1); //删除此商品
									localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
									//刷新页面
									vm.d.splice(i, 1);
									vm.$toast.fail("已删除");
								}
							}
						}).catch(() => {
							vm.$toast.fail("已取消");
						});
					},
					skipPd(id) {
						plus.webview.create("ProductDetail.html", "ProductDetail", {}, {
							Id: id
						}).show("slide-in-left");
					},
					select(id, price, buyCount, checked) {//选中后触发
						if(checked) {
							var cd = {
								goodsId: id,
								buyCount: buyCount
							}
							this.checkedData = this.checkedData.concat(cd)
						} else {
							for(var i = 0; i < this.checkedData.length; i++) {
								if(this.checkedData[i].goodsId == id) {
									this.checkedData.splice(i, 1);
								}
							}
						}
					},
					selectAll() {//全选
						for(var i = 0; i < this.d.length; i++) {
							this.d[i].checked = this.checked;
						}
					}
				},
				computed: {
					totalMoney() {
						var money = 0;
						for(var i = 0; i < this.d.length; i++) {
							if(this.d[i].checked) {
								money += this.d[i].RealPrice * this.d[i].buyCount
							}
						}
						return money;
					}
				},
				mounted() {
					var userData = JSON.parse(localStorage.getItem("userData"));
					var data1 = JSON.parse(localStorage.getItem(userData)); //购物车商品
					
					var Id;
					var Name;
					var CoverImage;
					var RealPrice;
					if(data1.length > 0) {
						this.isShow = false;
						for(var i = 0; i < data1.length; i++) {
							ajax({
								url: "http://dsapi.ysd3g.com/API/GoodsDetail",
								dataType: "jsonp",
								data: {
									gId: data1[i].goodsId
								},
								success(res) {
									if(res.Error) {
										vm.$toast.fail(res.Msg);
									} else {
										console.log(res)
										Id = res.Detail.Id;
										Name = res.Detail.Name;
										CoverImage = res.Detail.CoverImage;
										RealPrice = res.Detail.RealPrice;
										for(var j = 0; j < data1.length; j++) {
											if(Id == data1[j].goodsId) {
												vm.buyCount = data1[j].buyCount;
											}
										}
										vm.jsonData = {
											"Id": Id,
											"Name": Name,
											"CoverImage": CoverImage,
											"RealPrice": RealPrice,
											"buyCount": vm.buyCount,
											"checked": false
										}
										vm.d = vm.d.concat(vm.jsonData);
									}
								}
							});
						}
					}
				}
			})
		</script>
	
	
	
<!--	<script>
// 		var carts2=JSON.parse(plus.storage.getItem("shops"));
// 		console.log(carts2);
// 		var vn=new Vue({
// 			el:"#app",
// 			data:{
// 				imageURL:"../../img/kaixinguo.png",
// 				imageURL1:"../../img/xiangjiao.jpg",
// 				value1:1,
// 				value:1,
// 				price:"",
// 				num:1,
// 				carts:[
// 					{imgSrc:"../../img/kaixinguo.png",title:"开心果 人人的最爱",price:14.99,origin_price:199.00,num:1,tag:"热卖"},
// 					{imgSrc:"../../img/xiangjiao.jpg",title:"大香蕉 香蕉挺大个",price:19.31,origin_price:299,num:1,tag:"热卖"},
// 					{imgSrc:"../../img/redwine.jpg",title:"张裕特选级干红葡萄酒赤霞珠红酒【整箱6支】",price:199.99,origin_price:299,num:1,tag:"热卖"},
// 				],
// 				carts2:[]
// 			},
// 			created:function(){
// 				// this.carts2.push(JSON.parse(plus.storage.getItem("shops")));
// 				this.carts2=JSON.parse(plus.storage.getItem("shops"));
// 				console.log(localStorage.getItem("null"));
// 				console.log(this.carts2);
// 				for(var i=0;i<this.carts2.length;i++){
// 					var s=`
// 							<van-card
// 							  :num="num"
// 							  :tag="${this.carts2[i].Status}"
// 							  :title="${this.carts2[i].Name}"
// 							  :thumb="${this.carts2[i].CoverImage}"
// 							  :price="${this.carts2[i].RealPrice}"
// 							  :origin-price="${this.carts2[i].MarketPrice}"
// 							  >
// 							 <div slot="footer">
// 							  <van-row>
// 								  <van-col span="9">&nbsp;</van-col>
// 								  <van-col span="12">
// 									  <van-stepper
// 										  v-model="item.num"
// 										  integer
// 										  :min="1"
// 										  :max="40"
// 										  @plus="item.num++"
// 										  @minus="item.num--"
// 										  :step="1"></van-stepper>
// 								  </van-col>
// 								  <van-col span="2" offset="1">
// 									  <van-icon name="delete" style="margin-top: 10px;"></van-icon>
// 								  </van-col>
// 								</van-row>
// 							 </div>
// 							</van-card>
// 						</van-row>
// 						  </van-card>
// 					`;
// 					console.log(s);
// 				}
// 				
// 			},
// 			computed:{
// 				totalprice:function(){
// 					var num=0;
// 					for(var i=0;i<this.carts.length;i++){
// 						num=num+this.carts[i].price*this.carts[i].num;
// 					}
// 					this.price=num;
// 					return num;
// 				}
// 			},
// 			methods:{
// 				tjdd:function(){
// 					plus.webview.open("../setting/jiesuan.html", "jiesuan");
// 				},
// 				remove: function (i) {  //移除商品
// 					this.carts.splice(i,1);
// 				}
// 			}
// 			
// 		})
// 			
 	</script>-->
</body>
</html>